<template>
  <div class="indicatorl">
    <div class="list" ref="listRef">
      <div class="curr" :style="{ left }"></div>
      <div
        class="item"
        v-for="l in 8"
        :key="`indicatorl-item${l}`"
        @mousemove="handleMove(l)"
        :class="{ active: isActive.includes(l) }"
      >
        {{ l }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 是否停止自动轮播
    isStop: {
      type: Boolean,
      default: false,
    },
    anime: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      left: "0px",
      isActive: [1, 2, 3],
      currItem: 2,
      timer: null,
    };
  },
  mounted() {
    this.handleMove = this.debounce(this.handleMove, 100);
    this.start()
  },
  methods: {
    debounce(func, delay) {
      let timer;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    },
    // 负责控制高亮文字样式
    isActiveChange(item) {
      if (item == 1) {
        this.isActive = [1, 2, 3];
      } else if (item == 8) {
        this.isActive = [6, 7, 8];
      } else {
        this.isActive = [item - 1, item, item + 1];
      }
    },
    // 负责控制高亮背景左偏移
    leftChange(item) {
      item -= 2;
      if (item < 0) item = 0;
      if (item == 6) item = 5;
      this.$nextTick(() => {
        const width = this.$refs.listRef.clientWidth / 8;
        this.left = width * item + "px";
      });
    },
    handleMove(item) {
      this.currItem = item;
      this.leftChange(item);
      this.isActiveChange(item);
      this.anime(item);
    },
    // 定时动画
    start() {
      this.timer = setInterval(() => {
        let { currItem } = this;
        currItem++;
        if (currItem > 7) currItem = 2;
        this.handleMove(currItem);
      }, 4000);
    },
  },
  watch: {
    isStop: {
      handler(v) {
        if (!v) this.start();
        else clearTimeout(this.timer);
      },
    },
  },
};
</script>

<style scoped lang='scss'>
.indicatorl {
  position: absolute;
  bottom: vh(-10px);
  width: vw(421px);
  height: vh(48px);
  background: url("~@/assets/concreteScreen/num_bg.png");
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 vw(64px);
  display: flex;
  align-items: center;
  .list {
    width: 100%;
    display: flex;
    font-family: D-DIN-PRO;
    font-weight: bold;
    font-size: 18px;
    color: #dafdff;
    justify-content: space-between;
    position: relative;
    align-items: center;
    .item {
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .curr {
      position: absolute;
      width: vw(110px);
      height: vh(28px);
      border-radius: vh(12px);
      pointer-events: none;
      background: url("~@/assets/concreteScreen/tab_selected.png");
      background-size: 100% 100%;
      transition: all 0.2s ease-out;
    }
    .active {
      font-family: D-DIN-PRO;
      font-weight: bold;
      font-size: 18px;
      color: #31eff1;
    }
  }
}
</style>
